import { createRouter, createWebHistory } from 'vue-router'
import powerLack from '@/views/error/401.vue'
import Notfound from '@/views/error/404.vue'
import ServiceError from '@/views/error/500.vue'
import home from '@/views/home/HomeIndex.vue'
import mine from '@/views/mine/MineIndex.vue'

const routes = [
  {
    path: '/login',
    component: () => import(/* webpackChunkName: "layout" */ '@/layouts/InitialLayout.vue'),
    children: [
      {
        path: '/login',
        name: 'Login',
        component: () => import(/* webpackChunkName: "login" */ '@/views/Login.vue')
      }
    ]
  },
  {
    path: '/index',
    component: () => import(/* webpackChunkName: "layout" */ '@/layouts/BaseLayout.vue'),
    children: [
      {
        path: '/index',
        name: 'index',
        component: () => import(/* webpackChunkName: "index" */ '@/views/Index.vue')
      }
    ]
  },
  {
    path: '/home',
    component: () => import(/* webpackChunkName: "layout" */ '@/layouts/BaseLayout.vue'),
    children: [
      {
        path: '/home/index',
        name: 'home',
        component: home
      },
      {
        path: '/home/mine',
        name: 'mine',
        component: mine,
        meta: {
          title: '',
          keepAlive: false
        }
      }
    ]
  },
  {
    path: '/demo',
    component: () => import(/* webpackChunkName: "layout" */ '@/layouts/BaseLayout.vue'),
    children: [
      {
        path: '/demo/demo1',
        name: 'demo1',
        component: () => import(/* webpackChunkName: "demo" */ '@/views/demo/DemoIndex1.vue')
      },
      {
        path: '/demo/demo2',
        name: 'demo2',
        component: () => import(/* webpackChunkName: "demo" */ '@/views/demo/DemoIndex2.vue')
      },
      {
        path: '/demo/demo3',
        name: 'demo3',
        component: () => import(/* webpackChunkName: "demo" */ '@/views/demo/DemoIndex3.vue')
      },
      {
        path: '/demo/demo4',
        name: 'demo4',
        component: () => import(/* webpackChunkName: "demo" */ '@/views/demo/DemoIndex4.vue')
      },
      {
        path: '/demo/demo5',
        name: 'demo5',
        component: () => import(/* webpackChunkName: "demo" */ '@/views/demo/DemoIndex5.vue')
      },
      {
        path: '/demo/demo6',
        name: 'demo6',
        component: () => import(/* webpackChunkName: "demo" */ '@/views/demo/DemoIndex6.vue')
      },
      {
        path: '/demo/demo7',
        name: 'demo7',
        component: () => import(/* webpackChunkName: "demo" */ '@/views/demo/DemoIndex7.vue')
      },
      {
        path: '/demo/demo8',
        name: 'demo8',
        component: () => import(/* webpackChunkName: "demo" */ '@/views/demo/DemoIndex8.vue')
      }
    ]
  },
  {
    path: '/401',
    name: '401',
    component: powerLack
  },
  {
    path: '/500',
    name: '500',
    component: ServiceError
  },
  {
    path: '/:catchAll(.*)',
    name: '404',
    component: Notfound
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

/**
 * 路由守卫，开始，去那一页，现在是那一页，执行方法
 */
router.beforeEach((to, from, next) => {
  // 载入下面
  next()
})

/**
 * 路由守卫，结束
 */
router.afterEach(() => {
  // 结束内容
})

export default router
